<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<view class="" style="padding: 20rpx;">
			款式:{{clothesName}} {{clothesEncode}}
		</view>

<!-- 		<view class="" style="padding: 20rpx;">
			需生产:{{totalMount}}件
		</view>


		<view class="" style="padding: 20rpx;">
			当前库存:{{realNum}}件
		</view> -->

		<view class="bottom-buttons">
			<view @click="del()" class="button-tag">
				删除
			</view>
			<view @click="edit()" class="button-tag">
				修改
			</view>
		</view>

		<u-divider text="库存信息" :hairline="true"></u-divider>
		
		<template>
			<view class="u-content">
				<u-parse :content="content"></u-parse>
			</view>
		</template>

	<!-- 	<view>
			<u-cell-group>

				<u-cell size="large" v-for="(item1, index1) in data">
					<template slot='label'>
						<view class="" style="font-weight: 600;font-size: 45rpx;">
							<view style="margin: 2rpx;">{{item1.colorName}}</view>
							<view style="margin: 2rpx;">需生产 {{item1.num}}件 已生产 {{item1.realNum}}件</view>
						</view>
						<view class="detailColor" v-for="(item2, index2) in item1.sizeAndNumList">
							<view class="" style="display: flex;justify-content: space-between;">
								<view class="">
									{{item2.sizeName}}
								</view>
								<view class="">
									当前库存 {{item2.realNum}}
								</view>
								<view class="">
									时间批次 {{item2.createTime}}
								</view>
							</view>

						</view>
					</template>


				</u-cell>

			</u-cell-group>
		</view> -->




	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:"",
				realNum: 0, //真实库存
				totalMount: 0,
				data: "", //衣服库存数据
				id: "",
				clothesName: "",
				clothesEncode: "",
				pop: [{
						title: '颜色',

					},
					{
						title: '总数',

					},
					{
						title: '尺码',
					},
					{
						title: '数量',
					}

				],
				indexList: [

					{
						colorName: "黄色",
						sizeName: "m",
						mount: 12
					},
					{
						colorName: "黄色",
						sizeName: "m",
						num: 12
					}

				],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
				]
			}
		},
		methods: {
			del() {
				var that = this
				uni.showModal({
					title: '警告',
					content: '是否确认删除',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.api.get("/clothes/delPattern/" + that.id, {}).then(res => {
								console.log(res);
								that.$refs.uToast.show({
									type: 'default',
									title: '提示',
									message: res.mes,
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
								})
								uni.navigateBack();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			edit() {
				uni.navigateTo({
					url: "/pages/newclothes/newclothes?clothesId=" + this.id+"&clothesName="+this.clothesName
				})
			}
		},
		
		onShow() {
			this.api.get("/clothes/selectClothesInfo/" + this.id, {}).then(res => {
			this.clothesName = res.data.clothesName
			this.clothesEncode =  res.data.clothesEncode
				console.log(res);
				
			})
		},
		
		onLoad: function(options) {

			var that = this
			this.id = options.id
			
			console.log(options)

			this.api.get("/clothes/selectClothesSizeAndNum/" + this.id, {}).then(res => {
				console.log(res.data)
			//	that.data = res.data
				that.content=res.data.html
				console.log(res);
				
			})
		},


	}
</script>

<style scoped lang="scss">
	.bottom-buttons {
		margin-top: 10rpx;
		display: flex;
		justify-content: right;
		align-items: center;

	}

	.button-tag {
		margin-left: 40rpx;
		height: 30px;
		line-height: 30px;
		padding: 0 20px;
		border-radius: 15px;
		color: #A5A5A5;
		border: 1px solid #EDEDED;
	}

	.detailColor {
		margin-top: 40rpx;
	}

	// 控制高度
	// 正常高度
	.brand {
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
	}

	.item {
		margin: 26rpx;
		font-weight: 550;
		font-size: 35rpx;

	}

	.normalHeight {
		height: 100%;
		transition: 0.3s;
	}

	// 头部
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		height: 40px;
	}

	// 表格相关样式
	table {
		border-collapse: collapse;
		width: 98%;
		margin: 0 auto;
		text-align: center;
		font-size: 40rpx;
		font-weight: 600;


		// 每一行下面加边框
		tr {
			width: 100%;
			table-layout: fixed;
		}

		tbody {
			height: 500rpx;
			display: table-row;
		}

		tbody tr {
			display: flex;
			justify-content: space-between;
		}

		.cont {
			height: 40px;
		}
	}



	// 表头设置
	.top {
		height: 40px;
		line-height: 40px;
		background: rgb(242, 245, 247);

		display: flex;
		justify-content: space-around;
		width: 100%;
		table-layout: fixed;

		.title {
			margin-right: 3px;
		}

		th {
			border-left: 1px solid #e9ebec;
			font-weight: 500;
		}
	}
</style>
